iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0

前8篇學習完html基本語法,接下來來學習Css語法。

CSS(Cascading Style Sheets)是一種用於控制網頁樣式和外觀的語言。在CSS中,樣式規則由兩個主要部分組成:選擇器(selector)和宣告(declaration)。
一個完整的CSS規則看起來像這樣:
https://ithelp.ithome.com.tw/upload/images/20230924/201630365AEULKtDgt.png

範例如下:
https://ithelp.ithome.com.tw/upload/images/20230924/20163036tAWr3PDE4Y.png

https://ithelp.ithome.com.tw/upload/images/20230924/201630363Lg7pHH1U1.png

CSS四種寫法:
1.內聯式:
內聯式樣式直接寫在html的style屬性中。
優點是可以針對特定元素進行設定,但是缺點是難以維護。
https://ithelp.ithome.com.tw/upload/images/20230924/20163036yLqTOKxPda.png

2.內部式:
內部式樣本在html的style標籤中,位於head的區塊內。
https://ithelp.ithome.com.tw/upload/images/20230924/20163036oiOJ1JpIRI.png

3.外部式:外部式是指一個獨立的Css文件中,然後在html文件中利用link標籤引用。
例如一個名為style.css文件中:
https://ithelp.ithome.com.tw/upload/images/20230924/20163036690cuM9czw.png

然後在html文件中:
https://ithelp.ithome.com.tw/upload/images/20230924/20163036VHHZgIJjeL.png

4.嵌套式:
類似於外部式,但是他在Css文件中使用@import語法導入其他的css文件。
例如一個名為main.css的Css文件中:
https://ithelp.ithome.com.tw/upload/images/20230924/20163036xhqBs7liNl.png
優點可以將多個Css 文件合併為一個。
總結來說,我們最常用的是外部式跟內部式,因為有助於代碼的維護性。

Css選擇器宣告方式
Css選擇器的寫法不同,引用方式也不同。
下面介紹最常使用的宣告方式

1.元素選擇器:
選擇特定的html元素。
https://ithelp.ithome.com.tw/upload/images/20230924/20163036pHtN4WJ2RL.png
在這個例子中,會選擇所有的段落p元素。

2.類選擇器:
使用.句號再加上自訂的名稱來命名,選擇具有特定class屬性值的元素。
https://ithelp.ithome.com.tw/upload/images/20230924/20163036Ye63nGwx7D.png
例子中會選擇class=example的。
3.ID選擇器:
使用#再加上自訂的名稱來命名,選擇具有特定id 屬性值的元素。
https://ithelp.ithome.com.tw/upload/images/20230924/20163036qWXZaaqC2n.png
在例子中選擇id =title1的。


上一篇
Day8影音多媒體
下一篇
Day10 CSS字型、文字、項目清單
系列文
學習網頁前端基本的技術,包含如何使用HTML標籤跟CSS做出基本的網頁版型,了解bootstrap template如何建置網頁架構。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言